<style scoped lang="less">
  .total-wrap {
    background-color: @--theme;
    color: white;
    text-align: center;
    padding: 5vh 0;
    font-size: 0.5rem;
  }

  .total-content {
    margin-top: 2vh;
    font-size: 0.7rem;
  }

  .op-wrap {
    text-align: left;
  }

  .van-cell__left-icon {
    color: @--theme;
    font-size: 0.6rem;
  }

  .btn-tx {
    margin-top: 10vh;
  }
  .van-cell-group__title{
    text-align: left;
  }
</style>
<template>
  <div>
    <div class="total-wrap">
      <div class="total-title">可提现(元)</div>
      <div class="total-content">{{total*1.0/100}}</div>
    </div>
    <div class="op-wrap">
      <van-cell title="提现记录" icon="gold-coin-o" is-link to="withdrawals-record"/>
    </div>
    <van-button class="btn-tx" type="primary" @click="showDialog" loading-text="申请中" :loading="loading" >申请提现</van-button>
    <van-dialog
      v-model="show"
      title="请输入微信号"
      show-cancel-button
      @confirm="toApply"
    >
      <van-cell-group class="dialog-content" title="输入微信号以便客服联系您提现">
        <van-field v-model="wx_no" placeholder="请输入微信号" />
      </van-cell-group>

    </van-dialog>
  </div>
</template>
<script>
  import {getWithdrawals, apply} from '@/api/withdrawals'
  import Vue from 'vue';
  import {Cell,CellGroup, Button, Dialog, Toast,Field } from 'vant';

  Vue.use(Cell).use(Button).use(CellGroup).use(Dialog).use(Field);
  export default {
    name: 'withdrawals',
    data() {
      return {
        wx_no: null,
        total: 0.00,
        loading: false,
        show:false
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        let vm = this;
        getWithdrawals().then(rep => {
          vm.total = rep.data.data.income;
        })
      },
      showDialog(){
        this.show = true;
      },
      toApply() {
        if(this.wx_no===null||this.wx_no===''){
          Toast('不输入微信号客服将无法给您提现');
          return;
        }
        let vm = this;
        vm.loading = true;
        apply(vm.wx_no).then(rep => {
          vm.loading = false;
          Toast({
            type: 'success',
            message: '提交成功,待后台处理',
            onClose: () => {
              vm.getData();
            }
          });

        }, error => {
          vm.loading = false;
        })
      }
    }
  }
</script>